<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>样式 | 宋承昊的博客</title>
    <meta name="description" content="一个开箱即用web移动端组件">
    <link rel="stylesheet" href="/so/assets/style.63d62946.css">
    <link rel="modulepreload" href="/so/assets/Home.e186d856.js">
    <link rel="modulepreload" href="/so/assets/app.c6d2fa4d.js">
    <link rel="modulepreload" href="/so/assets/guide_design.md.ab9d5190.lean.js">
    <link rel="modulepreload" href="/so/assets/app.c6d2fa4d.js">
    <meta name="author" content="Vbenjs Team">
    <meta name="keywords" content="vben, vitejs, vite, ant-design-vue, vue">
    <link rel="icon" type="image/svg+xml" href="/logo.svg">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="vue vben admin docs">
    <link rel="icon" href="/favicon.ico">
    <meta name="twitter:title" content="样式 | 宋承昊的博客">
    <meta property="og:title" content="样式 | 宋承昊的博客">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-016e0934><div class="sidebar-button" data-v-016e0934><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/so/" aria-label="宋承昊的博客, back to home" data-v-016e0934 data-v-707ed49a><img class="logo" src="/so/logo.png" alt="Logo" data-v-707ed49a><!-- {{ $site.title }} --><text style="margin-top:-1px;" data-v-707ed49a>宋承昊 | 官方文档</text></a><div class="flex-grow" data-v-016e0934></div><div class="nav" data-v-016e0934><nav class="nav-links" data-v-016e0934 data-v-1e870408><!--[--><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/guide/introduction" data-v-c272f228>生活 <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/components/mapLocus" data-v-c272f228>技术 <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>友情链接</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/so/other/see" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>友情链接</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://echoyuyu.github.io/" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>我的简历</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="http://echoyuyu.gitee.io/so" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>项目源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://gitee.com/echoyuyu/song/stargazers" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>点赞支持</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/other/donate" data-v-c272f228>赞助 <!----></a></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav></div><div class="nav-icons" data-v-016e0934><div class="item" data-v-016e0934><button class="nav-btn" aria-label="Toggle Theme" data-v-016e0934><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style="display:none;"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style=""><path d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"></path></svg></button></div><div class="item" data-v-016e0934><a class="nav-btn" href="https://gitee.com/kevin_chou/qdpz" target="_blank" aria-label="View GitHub Repo" data-v-016e0934><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-016e0934><path d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z" fill="currentColor"></path></svg></a></div></div><!--[--><!--]--></header><!--[--><aside class="sidebar" data-v-4668b452><nav class="nav-links nav" data-v-4668b452 data-v-1e870408><!--[--><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/guide/introduction" data-v-c272f228>生活 <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/components/mapLocus" data-v-c272f228>技术 <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>友情链接</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/so/other/see" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>友情链接</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://echoyuyu.github.io/" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>我的简历</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="http://echoyuyu.gitee.io/so" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>项目源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://gitee.com/echoyuyu/song/stargazers" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>点赞支持</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/other/donate" data-v-c272f228>赞助 <!----></a></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav><!--[--><!--]--><ul class="sidebar-links" data-v-4668b452><!--[--><li class="sidebar-link"><p class="sidebar-link-item">基础</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/so/guide/">拍照</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/so/guide/settings">支付宝黄金卖出规则</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/so/guide/mock">济南今日天气</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-7abc59e6><div class="container" data-v-7abc59e6><!--[--><!--]--><div class="content" data-v-7abc59e6><div data-v-7abc59e6><h1 id="样式"><a class="header-anchor" href="#样式" aria-hidden="true">#</a> 样式</h1><h2 id="介绍"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>主要介绍如何在项目中使用和规划样式文件。</p><p>默认使用 less 作为预处理语言，建议在使用前或者遇到疑问时学习一下 <a href="http://lesscss.org/" target="_blank" rel="noopener noreferrer">Less</a> 的相关特性（如果想获取基础的 CSS 知识或查阅属性，请参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference" target="_blank" rel="noopener noreferrer">MDN 文档</a>）。</p><p>项目中使用的uniapp通用样式，都存放于 <a href="https://gitee.com/kevin_chou/qdpz/blob/develop/uni.scss" target="_blank" rel="noopener noreferrer">uni.scss</a> 中。</p><h4 id="以下colorui-uview-uni-scss-插件的样式已在-app-vue-main-js-中全局引入，您可以直接使用"><a class="header-anchor" href="#以下colorui-uview-uni-scss-插件的样式已在-app-vue-main-js-中全局引入，您可以直接使用" aria-hidden="true">#</a> 以下<code>ColorUi</code>,<code>uView</code>,<code>uni.scss</code> 插件的样式已在 App.vue/main.js 中全局引入，您可以直接使用</h4><div class="language-bash"><pre><code><span class="token builtin class-name">.</span>
├── colorui 	<span class="token comment"># colorUi组件</span>
├── uview-ui 	<span class="token comment"># uView组件</span>
└── uni.scss 	<span class="token comment"># uniapp自带</span>
</code></pre></div><h2 id="使用colorui"><a class="header-anchor" href="#使用colorui" aria-hidden="true">#</a> 使用colorUi</h2><p>项目中引用到了 <a href="http://docs.xzeu.com/#/" target="_blank" rel="noopener noreferrer">colorUi</a>,具体可以见文件使用说明。</p><p>语法如下:</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>padding-right-lg bg-gray<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="使用uview"><a class="header-anchor" href="#使用uview" aria-hidden="true">#</a> 使用uView</h2><p>项目中引用到了 <a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer">uView</a>，具体可以见文件使用说明。</p><p>我们在全局样式中，通过scss提供了对应的颜色变量名，方便您在任何可写css的地方，调用这些变量，如下：</p><div class="language-css"><pre><code><span class="token comment">/* 变量的定义，该部分uView已全局引入，无需您编写 */</span>
$<span class="token property">u-type-primary</span><span class="token punctuation">:</span> #2979ff<span class="token punctuation">;</span>
$<span class="token property">u-type-primary-light</span><span class="token punctuation">:</span> #ecf5ff<span class="token punctuation">;</span>
$<span class="token property">u-type-primary-disabled</span><span class="token punctuation">:</span> #a0cfff<span class="token punctuation">;</span>
$<span class="token property">u-type-primary-dark</span><span class="token punctuation">:</span> #2b85e4<span class="token punctuation">;</span>


<span class="token comment">/* 在您编写css的地方使用这些变量 */</span>
<span class="token selector">.title</span> <span class="token punctuation">{</span>
	<span class="token property">color</span><span class="token punctuation">:</span> $u-type-primary<span class="token punctuation">;</span>
	......
<span class="token punctuation">}</span>
</code></pre></div><h2 id="使用uni-scss"><a class="header-anchor" href="#使用uni-scss" aria-hidden="true">#</a> 使用uni.scss</h2><div class="tip custom-block"><p class="custom-block-title">温馨提醒</p><p>uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。</p><p>uni.scss 这个文件会被全局注入到所有文件，所以在页面内可以直接使用变量而不需要手动引入</p><p>uni-app 官方扩展插件及插件市场（<a href="https://ext.dcloud.net.cn" target="_blank" rel="noopener noreferrer">https://ext.dcloud.net.cn</a>）上很多三方插件均使用了这些样式变量</p><p>如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App</p><p>如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能</p></div><h4 id="注意"><a class="header-anchor" href="#注意" aria-hidden="true">#</a> <code>注意</code></h4><ul><li>如要使用这些常用变量，需要在 HBuilderX 里面安装 scss 插件；</li><li>使用时需要在 style 节点上加上 lang=&quot;scss&quot;。</li></ul><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
......
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>pages.json不支持scss，原生导航栏和tabbar的动态修改只能使用js api</li></ul><p><strong>以下是 uni.scss 的相关变量：</strong></p><div class="language-css"><pre><code><span class="token comment">/* 颜色变量 */</span>

<span class="token comment">/* 行为相关颜色 */</span>
$<span class="token property">uni-color-primary</span><span class="token punctuation">:</span> #007aff<span class="token punctuation">;</span>
$<span class="token property">uni-color-success</span><span class="token punctuation">:</span> #4cd964<span class="token punctuation">;</span>
$<span class="token property">uni-color-warning</span><span class="token punctuation">:</span> #f0ad4e<span class="token punctuation">;</span>
$<span class="token property">uni-color-error</span><span class="token punctuation">:</span> #dd524d<span class="token punctuation">;</span>

<span class="token comment">/* 文字基本颜色 */</span>
$<span class="token property">uni-text-color</span><span class="token punctuation">:</span>#333<span class="token punctuation">;</span>//基本色
$<span class="token property">uni-text-color-inverse</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>//反色
$<span class="token property">uni-text-color-grey</span><span class="token punctuation">:</span>#999<span class="token punctuation">;</span>//辅助灰色，如加载更多的提示信息
$<span class="token property">uni-text-color-placeholder</span><span class="token punctuation">:</span> #808080<span class="token punctuation">;</span>
$<span class="token property">uni-text-color-disable</span><span class="token punctuation">:</span>#c0c0c0<span class="token punctuation">;</span>

<span class="token comment">/* 背景颜色 */</span>
$<span class="token property">uni-bg-color</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span>
$<span class="token property">uni-bg-color-grey</span><span class="token punctuation">:</span>#f8f8f8<span class="token punctuation">;</span>
$<span class="token property">uni-bg-color-hover</span><span class="token punctuation">:</span>#f1f1f1<span class="token punctuation">;</span>//点击状态颜色
$<span class="token property">uni-bg-color-mask</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.4<span class="token punctuation">)</span><span class="token punctuation">;</span>//遮罩颜色

<span class="token comment">/* 边框颜色 */</span>
$<span class="token property">uni-border-color</span><span class="token punctuation">:</span>#c8c7cc<span class="token punctuation">;</span>

<span class="token comment">/* 尺寸变量 */</span>

<span class="token comment">/* 文字尺寸 */</span>
$<span class="token property">uni-font-size-sm</span><span class="token punctuation">:</span>24rpx<span class="token punctuation">;</span>
$<span class="token property">uni-font-size-base</span><span class="token punctuation">:</span>28rpx<span class="token punctuation">;</span>
$<span class="token property">uni-font-size-lg</span><span class="token punctuation">:</span>32rpx<span class="token punctuation">;</span>

<span class="token comment">/* 图片尺寸 */</span>
$<span class="token property">uni-img-size-sm</span><span class="token punctuation">:</span>40rpx<span class="token punctuation">;</span>
$<span class="token property">uni-img-size-base</span><span class="token punctuation">:</span>52rpx<span class="token punctuation">;</span>
$<span class="token property">uni-img-size-lg</span><span class="token punctuation">:</span>80rpx<span class="token punctuation">;</span>

<span class="token comment">/* Border Radius */</span>
$<span class="token property">uni-border-radius-sm</span><span class="token punctuation">:</span> 4rpx<span class="token punctuation">;</span>
$<span class="token property">uni-border-radius-base</span><span class="token punctuation">:</span> 6rpx<span class="token punctuation">;</span>
$<span class="token property">uni-border-radius-lg</span><span class="token punctuation">:</span> 12rpx<span class="token punctuation">;</span>
$<span class="token property">uni-border-radius-circle</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>

<span class="token comment">/* 水平间距 */</span>
$<span class="token property">uni-spacing-row-sm</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
$<span class="token property">uni-spacing-row-base</span><span class="token punctuation">:</span> 20rpx<span class="token punctuation">;</span>
$<span class="token property">uni-spacing-row-lg</span><span class="token punctuation">:</span> 30rpx<span class="token punctuation">;</span>

<span class="token comment">/* 垂直间距 */</span>
$<span class="token property">uni-spacing-col-sm</span><span class="token punctuation">:</span> 8rpx<span class="token punctuation">;</span>
$<span class="token property">uni-spacing-col-base</span><span class="token punctuation">:</span> 16rpx<span class="token punctuation">;</span>
$<span class="token property">uni-spacing-col-lg</span><span class="token punctuation">:</span> 24rpx<span class="token punctuation">;</span>

<span class="token comment">/* 透明度 */</span>
$<span class="token property">uni-opacity-disabled</span><span class="token punctuation">:</span> 0.3<span class="token punctuation">;</span> // 组件禁用态的透明度

<span class="token comment">/* 文章场景相关 */</span>
$<span class="token property">uni-color-title</span><span class="token punctuation">:</span> #2C405A<span class="token punctuation">;</span> // 文章标题颜色
$<span class="token property">uni-font-size-title</span><span class="token punctuation">:</span>40rpx<span class="token punctuation">;</span>
$<span class="token property">uni-color-subtitle</span><span class="token punctuation">:</span> #555555<span class="token punctuation">;</span> // 二级标题颜色
$<span class="token property">uni-font-size-subtitle</span><span class="token punctuation">:</span>36rpx<span class="token punctuation">;</span>
$<span class="token property">uni-color-paragraph</span><span class="token punctuation">:</span> #3F536E<span class="token punctuation">;</span> // 文章段落颜色
$<span class="token property">uni-font-size-paragraph</span><span class="token punctuation">:</span>30rpx<span class="token punctuation">;</span>
</code></pre></div><h2 id="开启-scoped"><a class="header-anchor" href="#开启-scoped" aria-hidden="true">#</a> 开启 scoped</h2><p>没有加 <code>scoped</code> 属性，默认会编译成全局样式，可能会造成全局污染</p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">温馨提醒</p><p>使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。</p></div><h2 id="深度选择器"><a class="header-anchor" href="#深度选择器" aria-hidden="true">#</a> 深度选择器</h2><p>有时我们可能想明确地制定一个针对子组件的规则。</p><p>如果你希望 <code>scoped</code> 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 <code>&gt;&gt;&gt;</code> 操作符。有些像 Sass 之类的预处理器无法正确解析 <code>&gt;&gt;&gt;</code>。这种情况下你可以使用 <code>/deep/</code> 或 <code>::v-deep</code> 操作符取而代之——两者都是 <code>&gt;&gt;&gt;</code> 的别名，同样可以正常工作。</p><p>详情可以查看 RFC<a href="https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md" target="_blank" rel="noopener noreferrer">0023-scoped-styles-changes</a>。</p><p>使用 scoped 后，父组件的样式将不会渗透到子组件中</p></div></div><footer class="page-footer" data-v-7abc59e6 data-v-22e60b1a><div class="edit" data-v-22e60b1a><div class="edit-link" data-v-22e60b1a data-v-045573c2><a class="link" href="https://github.com/echoyuyu/edit/main/guide/design.md" target="_blank" rel="noopener noreferrer" data-v-045573c2>为此页提供修改建议 <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-045573c2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-22e60b1a><!----></div></footer><!----><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"cea1f6db\",\"readme.md\":\"ed280d6c\",\"components_camera.md\":\"3226f6e5\",\"components_chat.md\":\"a0237134\",\"components_cssdiscern.md\":\"8eeaa5a1\",\"components_csslogin.md\":\"4ae91895\",\"components_cssrankinglist.md\":\"76b68561\",\"components_keyboard.md\":\"63ecd8f1\",\"components_maplocus.md\":\"dc370285\",\"components_pay_matting.md\":\"b7c287c3\",\"components_pay_poster.md\":\"0b318d55\",\"components_ucharts.md\":\"0519e4b1\",\"components_wz3.md\":\"11d68880\",\"components_wz4.md\":\"e7766dcf\",\"components_wz5.md\":\"2afcbf2d\",\"guide_component.md\":\"6680ce7a\",\"guide_deploy.md\":\"4fd4708d\",\"guide_design.md\":\"ab9d5190\",\"guide_index.md\":\"7a509e98\",\"guide_introduction.md\":\"4dc4d99c\",\"guide_mock.md\":\"32cb9f20\",\"guide_router.md\":\"67abd7df\",\"guide_settings.md\":\"22f60ab3\",\"other_donate.md\":\"8416981e\",\"other_see.md\":\"419ca5c8\",\"other_wz1.md\":\"1c5a99f7\",\"other_wz2.md\":\"a4be2470\"}")</script>
    <script type="module" async src="/so/assets/app.c6d2fa4d.js"></script>
  </body>
</html>